<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="http://a.tbcdn.cn/s/kissy/1.3.0rc/css/base.css" rel="stylesheet"/>
    <style>
        .shape {
            position: absolute;
            left: 200px;
            top: 200px;
            width: 98px;
            height: 98px;
            border: 1px solid red;
        }

        #shapeT,#shapeT2 {
            border: 1px solid green;
        }

        #t2,#shapeT2 {
            left: 500px;
            top: 400px;
        }
    </style>
</head>
<body>
<div id="shapeT" class="shape"></div>
<div id="t" class="shape">
</div>
<div id="shapeT2" class="shape"></div>
<div id="t2" class="shape">
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use('dom', function (S, Dom) {
        var t = Dom.get('#t');
        var t2 = Dom.get('#t2');
        Dom.css(t, 'transform-origin', '0 0');
        var i = 0,
                step = 15;
        setInterval(function () {
            Dom.css(t, 'transform', 'translate(50px,20px) rotate(' + (step * (++i) % 360) + 'deg) ');
            Dom.css(t2, 'transform', 'rotate(' + (step * (++i) % 360) + 'deg)');
        }, 500);
        S.log(Dom.css(t, 'transform'));
    });
</script>
</body>
</html>